<template>
    <div>
        <div id="personnel_list_one" style="width:200px;height:220px;"></div>
    </div>
</template>

<script>
import * as echarts from "echarts";

export default {
    mounted() {
        this.personnelListOne()
    },
    methods: {
        //第一个仪表盘
        personnelListOne() {
            var chartDom = document.getElementById('personnel_list_one');
            console.log(chartDom, 'chartDom');
            var myChart = echarts.init(chartDom);
            var option;
            option = {
                // 背景图片设置
                graphic: [
                    {
                        type: "image",
                        left: "25",
                        top: "30",
                        z: 2,
                        bounding: "raw",
                        rotation: 0, //旋转
                        // origin: [50, 50], //中心点
                        scale: [1, 1], //缩放
                        style: {
                            // 背景图
                            image: require("../../../../assets/img/polic_bac.png"),
                            opacity: 1,
                        },
                    },
                ],
                tooltip: {
                    // formatter: '{a} <br/>{b} : {c}%'
                },

                series: [
                    {
                        type: "gauge",
                        // startAngle: 100,
                        // endAngle: 0,
                        // 是否顺时针
                        // clockwise:false,
                        radius: "170%",
                        center: ['50%', '50%'],
                        // 指针
                        pointer: {
                            show: true,
                            length: '30%',
                            width: 4,
                            // offsetCenter:[0,-1000]

                        },
                        // 指针样式
                        itemStyle: {
                            normal: {
                                color: '#4FFFC7',
                                borderWidth: 0
                            },
                        },
                        // 指针固定点
                        anchor: {
                            show: true,
                            size: 4,
                            showAbove: true,
                            offsetCenter: [0, 0]
                        },
                        //    展示当前进度
                        // progress: {
                        //     show: true,
                        //     overlap: false,
                        //     roundCap: true,
                        //     clip: false,
                        //     itemStyle: {
                        //         borderWidth: 1,
                        //     },
                        // },
                        axisLine: {
                            show: false,
                            // show: true,
                            lineStyle: {       // 属性lineStyle控制线条样式
                                width: 0, //表盘宽度
                                //设置仪表盘颜色和指针颜色
                            }
                        },

                        // 分割线
                        splitLine: {
                            show: false,
                            // distance: 0,
                            // length: 10,
                        },
                        axisTick: {
                            show: false,
                        },
                        // 仪表盘数字
                        axisLabel: {
                            show: false,
                            distance: 0,
                        },
                        title: {   //仪表盘标题show: true,
                            offsetCenter: ['0', '100'],
                            textStyle: {
                                color: '#4FFFC7',
                                fontSize: 16,
                                fontFamily: 'Microsoft YaHei'
                            }
                        },
                        detail: {
                            // 指针下面文字的显示颜色
                            textStyle: {
                                fontSize: 16,
                                color: '#4FFFC7',
                                fontWeight: 400,

                            },
                            // 调整数据跟指针之间的距离
                            offsetCenter: [0, '11%'],
                            // formatter: function(){return '上市时间\n'+time;
                            // }
                        },

                        data: [
                            {
                                value: 20,
                                name: "高级工程师",
                            },
                        ],
                    },
                ],

            }
            // 数据格式化
            // const getischargeOptions = () => {
            //     return Number(option.series[0].data[0].value).toFixed(2) + '%';
            // };
            option && myChart.setOption(option);
        },
    }
}
</script>

<style>
#personnel_list_one{
    background-color: #000;
}
</style>